<html>

<head>
    <meta charset="UTF-8">
    <title>topic信息列表</title>
<!--        <link rel="stylesheet" href="../css/index.css">-->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/topic_list.css">
    <!-- 引入ElementUI组件库 -->
    <script src="../js/vue.js"></script>
    <script src="../js/index.js"></script>
    <!-- 常用http请求，axios实现 -->
    <script src="../js/axios.min.js"></script>
    <script src="../js/constants.js"></script>
    <script src="../js/utils.js"></script>
</head>

<body class="main-content">
<div id="app">
    <div class="top-tab">
        <div>
            <span>
                <img src="../img/mq_logo.png" class="top-logo" alt="">
            </span>
            <span class="top-title top-title-link-choose" >
                    Topic管理
            </span>
            <span class="top-title top-title-link" onclick="window.location.href='consume_detail.html'">
                    消费者详情
            </span>
        </div>
    </div>

    <div class="main-body">
        <div class="search-input">
            <span>
               <el-input
                       placeholder="请输入topic"
                       v-model="queryTopicReq.topic"
                       clearable>
              </el-input>
            </span>
        </div>
        <div class="search-btn">
            <el-button type="primary" @click="pageQueryTopicInfo()">搜索</el-button>
        </div>
        <div class="table-content">
            <el-table
                    :data="topicList"
                    stripe
                    style="width: 100%">
                <el-table-column
                        prop="topic"
                        label="topic">
                    <template slot-scope="scope">
                        <el-tag  close-transition>
                            {{scope.row.topic}}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="queueSize"
                        label="queueSize">
                </el-table-column>
                <el-table-column
                        prop="offset"
                        label="offset">
                </el-table-column>
                <el-table-column
                        prop="offsetLimit"
                        label="offsetLimit">
                </el-table-column>
                <el-table-column
                        prop="createTime"
                        label="createTime">
                </el-table-column>
            </el-table>
            <div class="pagination-block">
                <el-pagination
                        layout="prev, pager, next"
                        :current-page="tablePage.currentPage"
                        :page-size="tablePage.pageSize"
                        :total="tablePage.totalPage"
                        @current-change="handlePageChange"
                        >
                </el-pagination>
            </div>
        </div>
    </div>
</div>

</body>
<script src="../js/topic_list.js"></script>

</html>